Scripting
Getting Started
Documentation
Changelog
Privacy
Getting Started
Documentation
Changelog
Privacy

onDropContent

The onDropContent view modifier allows a view in your script to act as a drop target, accepting files, images, or text dragged in from other apps. This makes it easy to build interactive interfaces that respond to drag-and-drop gestures for your script.

Overview

Use onDropContent to:

  • Accept content (e.g., images or files) dragged into your view.
  • Restrict accepted data types using Uniform Type Identifiers (UTIs).
  • Track when the drag cursor enters or exits the drop area.
  • Handle the dropped content through a callback.

Modifier Definition

1onDropContent?: {
2  types: UTType[]
3  isTarget: {
4    value: boolean
5    onChanged: (value: boolean) => void
6  }
7  onResult: (result: {
8    texts: string[]
9    images: UIImage[]
10    fileURLs: string[]
11  }) => void
12}

Parameters

Property Type Description
types UTType[] A list of Uniform Type Identifiers (e.g., "public.image", "public.text") that specifies which content types this view can accept. If the dragged content does not match these types, the view does not respond to the drop.
isTarget { value: boolean; onChanged: (value: boolean) => void } A binding object that reflects whether the drag operation is currently hovering over the view. Use this to update UI appearance (e.g., highlight the drop area).
onResult (result) => void A callback that provides the dropped content when a valid drop occurs. The result includes text, images, and file URLs if available.

Result Object Structure

1{
2  texts: string[]
3  images: UIImage[]
4  fileURLs: string[]
5}
  • texts – Plain text strings extracted from the drop.
  • images – Dropped images as UIImage instances.
  • fileURLs – Local file paths of dropped files.

Example

1const [isTarget, setIsTarget] = useState(false)
2
3return <VStack
4  onDropContent={{
5    types: ["public.image"],
6    isTarget: {
7      value: isTarget,
8      onChanged: setIsTarget
9    },
10    onResult: (result) => {
11      console.log(`Received ${result.images.length} image(s)`)
12    }
13  }}
14>
15  <Text>
16    {isTarget ? "Drop here!" : "Drag an image into this area."}
17  </Text>
18</VStack>

In this example:

  • The VStack accepts dropped images ("public.image").
  • The UI updates when the cursor hovers over the drop area.
  • When an image is dropped, the count is logged.
Outline